<template>
  <Modal v-model="visible"
         title="添加任务"
         @on-cancel="closeModal"
         footer-hide
         :width="480">
    <Form ref="form" :model="form" :rules="rules"
          :label-width="100">
      <FormItem label="组名" prop="jobGroupName">
        <Input v-model="form.jobGroupName" placeholder="请输入组名"></Input>
      </FormItem>
      <FormItem label="类名" prop="jobClassName">
        <Input v-model="form.jobClassName" placeholder="请输入类名"></Input>
      </FormItem>
      <FormItem label="表达式" prop="cronExpression">
        <Input v-model="form.cronExpression" placeholder="请输入表达式"></Input>
      </FormItem>
      <FormItem>
        <Button type="primary" :loading="submitting" @click="submit">提交</Button>
      </FormItem>
    </Form>
  </Modal>
</template>

<script>
import { createJob } from '../../../../apis/system/quartz';

export default {
  name: 'create',
  data() {
    return {
      visible: false,
      form: {
        jobGroupName: undefined,
        jobClassName: undefined,
        cronExpression: undefined
      },
      rules: {
        jobGroupName: [
          { required: true, message: '请输入组名', trigger: 'blur' }
        ],
        jobClassName: [
          { required: true, message: '请输入类名', trigger: 'blur' }
        ],
        cronExpression: [
          { required: true, message: '请输入表达式', trigger: 'blur' }
        ]
      },
      submitting: false
    };
  },
  methods: {
    openModal() {
      this.visible = true;
    },
    submit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.submitting = true;

          createJob({
            jobGroupName: this.form.jobGroupName,
            jobClassName: this.form.jobClassName,
            cronExpression: this.form.cronExpression
          }, () => {
            this.submitting = false;

            this.$Message.success('保存成功');
            this.closeModal();
            this.$refs.form.resetFields();
            this.$emit('success');
          }, () => {
            this.submitting = false;
          });
        }
      });
    },
    closeModal() {
      this.visible = false;
    }
  }
};
</script>

<style scoped>

</style>
